<script setup>
  import { ToskList } from '@/apis/task.js'
  import { toast } from '@/utils/utils.js'
  import { onLoad } from '@dcloudio/uni-app'
  import { ref, onMounted } from 'vue'

  const deliveryList = ref([]) // 任务列表数据
  const pages = ref(0) // 总页码
  const page = ref(1) // 控制滚动条让页码加加，来发请求

  const loadData = async () => {
    const res = await ToskList({
      page: page.value,
      pageSize: 5,
      status: 6,
    })
    console.log(res)
    //防止后台是null
    if (!res.data.items) {
      res.data.items = []
    }
    const first = res.data.items[0]
    for (let i = 0; i < 5; i++) {
      res.data.items.push({ ...first })
    }
    //记录总页码
    pages.value = res.data.pages
    deliveryList.value.push(...res.data.items)
    // // console.log(pickUpList.value)
    toast('加载成功')
  }

  //滚动条加载数据
  const onScrollToLower = () => {
    if (page.value >= pages.value) return toast('没有更多了')
    page.value++
    loadData()
  }

  //下拉刷新
  const refreshing = ref(false)
  const onRefresh = async () => {
    refreshing.value = true
    // 刷新：重新加载第一页的数据，将现有的数据清空
    page.value = 1
    deliveryList.value = []
    try {
      await loadData()
    } finally {
      refreshing.value = false
    }
  }

  onMounted(async () => {
    console.log(456)
    await loadData()
  })
</script>

<template>
  <scroll-view
    scroll-y
    :refresher-triggered="refreshing"
    refresher-enabled
    class="scroll-view"
    @scrolltolower="onScrollToLower"
    @refresherrefresh="onRefresh"
  >
    <view class="scroll-view-wrapper" v-for="v of deliveryList" :key="v.id">
      <view class="task-card">
        <navigator hover-class="none" :url="`/subpkg_task/detail/index?id=${v.id}`">
          <view class="header">
            <text class="no">任务编号:{{ v.transportTaskId }}</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line">{{ v.startAddress }}</view>
              <view class="line">{{ v.endAddress }}</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">{{ v.planArrivalTime }}</view>
          <navigator
            hover-class="none"
            :url="`/subpkg_task/delivery/index?id=${v.id}`"
            class="action"
          >
            交付
          </navigator>
        </view>
      </view>

      <!-- <view class="task-card">
        <navigator hover-class="none" url="/subpkg_task/detail/index?id=001">
          <view class="header">
            <text class="no">任务编号: XAHH1234567</text>
          </view>
          <view class="body">
            <view class="timeline">
              <view class="line"
                >北京市昌平区回龙观街道西三旗桥东金燕龙写字楼8877号</view
              >
              <view class="line">河南省郑州市路北区北清路99号</view>
            </view>
          </view>
        </navigator>
        <view class="footer">
          <view class="label">提货时间</view>
          <view class="time">2022.05.04 13:00</view>
          <navigator
            hover-class="none"
            url="/subpkg_task/record/index"
            class="action"
            >回车登记</navigator
          >
        </view>
      </view> -->
      <view v-if="deliveryList.length === 0" class="task-blank">无在途货物</view>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
